<template>
	<view class="container">

		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
				
				<uni-forms-item label="日期" label-width="90px" required name="handleTime">
					<uni-datetime-picker type="date" return-type="string" v-model="valiFormData.handleTime" />
				</uni-forms-item>
				<uni-forms-item label="状态" label-width="90px" name="status">
					<uni-easyinput v-model="valiFormData.status" placeholder="请输入状态" />
				</uni-forms-item>

				<uni-forms-item label="站点类型" label-width="90px" name="stationType">
					<uni-easyinput v-model="valiFormData.stationType" placeholder="请输入站点类型" />
				</uni-forms-item>
				<uni-forms-item label="站点名称" label-width="90px"  name="stationName">
					<uni-easyinput v-model="valiFormData.stationName" placeholder="请输入站点名称" />
				</uni-forms-item>
				<uni-forms-item label="构筑物名称" label-width="90px" required name="structureName">
					<uni-easyinput v-model="valiFormData.structureName" placeholder="请输入构筑物名称" />
				</uni-forms-item>

				<uni-forms-item label="设备名称" label-width="90px" required name="deviceName">
					<uni-easyinput v-model="valiFormData.deviceName" placeholder="请输入设备名称" />
				</uni-forms-item>
				
				<uni-forms-item label="处理情况" label-width="90px" name="dealDetails">
					<uni-easyinput type="textarea" v-model="valiFormData.dealDetails" placeholder="请输入处理情况" />
				</uni-forms-item>
				<uni-forms-item label="保养耗材" label-width="90px" name="maintenanceText">
					<uni-easyinput type="textarea" v-model="valiFormData.maintenanceText" placeholder="请输入保养内容" />
				</uni-forms-item>
				<uni-forms-item label="验收结果" label-width="90px" name="verify">
					<uni-easyinput type="textarea" v-model="valiFormData.verify" placeholder="请输入验收结果" />
				</uni-forms-item>
			
				<uni-forms-item label="保养结束图片" label-width="90px" name="repairImgPath">
					<uni-file-picker  limit="1" :value="fileList.url" :image-styles="imageStyles"
						:sourceType="sourceType" @select="select" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
				</uni-forms-item>
				

			</uni-forms>
			<button type="primary" @click="submit('valiForm')">提交</button>
		</view>




	</view>
</template>
<script>
	import {
		createProduceRepair
	} from "@/api/index"
	export default {
		data() {
			return {


				// 单选数据源
				scheduleFlags: [{
					text: '是',
					value: '是'
				}, {
					text: '否',
					value: '否'
				}],
				source: [{
					text: '是',
					value: '是'
				}, {
					text: '否',
					value: '否'
				}],
fileList: [],
				fileList1: [],
				// 上传图片的样式
				imageStyles: {
					width: 90,
					height: 90,
				},
				// uni.chooseImage值，从相册选择，拍摄
				sourceType: ['album', 'camera'],

				// 校验表单数据
				valiFormData: {
					"type": "维修",
					"handleTime": "",
					"stationType": "",
					"stationName": "",
					"structureName": "",
					"deviceName": "",
					"faultDetails": "",
					"faultImgPath": "",
					"repairGroups": "",
					"dealDetails": "",
					"material": "",
					"verify": ""
				},
				// 校验规则
				rules: {
					lastTime: {
						rules: [{
							required: true,
							errorMessage: '上次保养时间不能为空'
						}]
					}
				},



			}
		},
onReady() {
			this.valiFormData.handleTime =new Date().toISOString().split('T')[0];
		},
		methods: {

			submit(ref) {
				
				console.log('success', this.$refs[ref]);
				this.$refs[ref].validate().then(res => {
					console.log('success', this.valiFormData);
					res.type='保养';
					console.info("pppppppppp", this.fileList)
					if (this.fileList.length > 0) {
						res.repairImgPath = this.fileList[0].url;
					}
					createProduceRepair(res).then(response => {
						console.info('ccccccc', response)
						if (response == '') {
							uni.showToast({
								title: `提交成功`
							})
							uni.navigateBack()
						} else {
							uni.showToast({
								title: `提交失败`,
								icon: 'fail'
							})
						}


					})

				}).catch(err => {
					console.log('err', err);
				})
			},// 获取上传状态
			select(e) {
				// 获取本地存储中的认证令牌
				const accessToken = uni.getStorageSync('accessToken');
				console.log('选择文件：', e)
				// 解决file对象取值问题
				// 微信小程序上传-需要微信临时提供临时地址
				const file = e;
				var token = getToken();
				// 处理每张选中的图片
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},

					// 成功函数
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList.push(x)
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			// 获取上传进度
			progress(e) {
				// 没有上传空间，不会执行 
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				// 没有上传空间，不会执行 
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				// 没有上传空间，不会执行 
				console.log('上传失败：', e)
			},
			// 删除
			deletea(e) {
				console.log('删除图片', e);
			},
		}
	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>